<style>
#map-outer {height: 440px; padding: 20px; border: 2px solid #CCC; margin-bottom: 20px; background-color:#FFF }
#map-container { height: 400px }
@media all and (max-width: 768px) {
  #map-outer  { height: 650px }
}
</style>
<div class="page-header">
  <h2 class="text-center">Détails d'une brocante</h2>
</div>

<div class="container">

  <ol class="breadcrumb">
    <li><a href="<?php echo Router::url(''); ?>">Accueil</a></li>
    <li><a href="<?php echo Router::url('brocantes/dept/'.$brocantes->numDepartement); ?>">Liste des brocantes pour : <?php echo $brocantes->numDepartement;?></a></li>
    <li class="active">Détails d'une brocante</li>
  </ol>
  <div class="row featurette">
   <div class="col-md-4">
    <img style="max-height:400px;" class="img-responsive center-block" src="<?php if(file_exists(WEBROOT.DS.'img/phBroc/'.$brocantes->id.'.jpg')){ echo BASE_URL.'/webroot/img/phBroc/'.$brocantes->id.'.jpg';} else {echo BASE_URL.'/webroot/img/photo-brocante.png';} ?>" alt="Photo brocante">
  </div>
  <div class="col-md-8">                                          
   <h3 class="featurette-heading"><?php echo $brocantes->nom," - " ?><span class="text-muted"><?php echo strftime('%A, %e %B %Y à %H:%M', strtotime($brocantes->dateBroc)) ?></span></h3>
   <h3 class="featurette-heading"><span class="text-muted"><?php echo $brocantes->lieu; ?></span></h3>
   <h3 class="featurette-heading">Catégorie : <?php if(isset($categorie->nom)){ echo $categorie->nom; }else{ echo 'Non déterminé';} ?></h3>
   <blockquote><?php echo $brocantes->description; ?></blockquote>
   <!-- <div class="fb-like" data-href="<?php //echo 'http://www.brocantes.com'; ?>" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
   <div>
    <a href="<?php //echo Router::url('brocantes/view/'.$brocantes->numDepartement); ?>" data-text="<?php //echo $brocantes->nom; ?>" class="twitter-share-button" data-lang="fr">Tweeter</a>
  </div> -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Partager cette brocante</h3>
    </div>
    <div class="panel-body">
      <div class="btn-group">
        <button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Facebook</button>
      </div>
      <div class="btn-group">
        <button class="btn btn-twitter"><i class="fa fa-twitter"></i> | Tweeter</button>
      </div>
    </div>
  </div>
</div>  
</div>

<div class="row featurette">
  <div class="col-md-12">
    <hr class="featurette-divider">
    <div id="map-container"></div>
  </div>
</div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>  

function init_map() {
  var myLocation = new google.maps.LatLng('<?php echo $brocantes->xLat; ?>','<?php echo $brocantes->xLong; ?>');

  var mapOptions = {
    center: myLocation,
    zoom: 14
  };

  var marker = new google.maps.Marker({
    position: myLocation,
    title: '<?php echo $brocantes->nom; ?>'});

  var map = new google.maps.Map(document.getElementById("map-container"),
    mapOptions);

  marker.setMap(map); 

}

google.maps.event.addDomListener(window, 'load', init_map);

</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>